<template>
	<gradient-background>
		<custom-navbar :title="'工具集合'"></custom-navbar>
		
		<view class="container">
			<view class="content">
				<!-- 搜索框 -->
				<view class="search-section">
					<view class="search-box">
						<input 
							v-model="searchText" 
							placeholder="搜索工具..." 
							class="search-input"
							@input="onSearchInput"
						/>
						<text class="search-icon">🔍</text>
					</view>
				</view>
				
				<!-- 分类筛选 -->
				<view class="category-section" v-if="!searchText">
					<scroll-view scroll-x class="category-scroll">
						<view class="category-list">
							<view 
								v-for="category in categories" 
								:key="category.id"
								class="category-item"
								:class="{ active: selectedCategory === category.id }"
								@tap="selectCategory(category.id)"
							>
								<text class="category-name">{{ category.name }}</text>
							</view>
						</view>
					</scroll-view>
				</view>
				
				<!-- 工具列表 -->
				<scroll-view scroll-y class="tools-list">
					<view class="tools-grid">
						<tool-card 
							v-for="tool in filteredTools" 
							:key="tool.id"
							:tool="tool"
							@tap="openTool"
						></tool-card>
					</view>
					
					<!-- 空状态 -->
					<view v-if="filteredTools.length === 0" class="empty-state">
						<view class="empty-icon">
							<text class="icon-text">🔍</text>
						</view>
						<text class="empty-text">暂无相关工具</text>
						<text class="empty-desc">试试修改搜索关键词或切换分类</text>
					</view>
				</scroll-view>
			</view>
		</view>
	</gradient-background>
</template>

<script>
import GradientBackground from '@/components/gradient-background/gradient-background.vue'
import CustomNavbar from '@/components/custom-navbar/custom-navbar.vue'
import ToolCard from '@/components/tool-card/tool-card.vue'
import ToolsService from '@/utils/tools-service.js'

export default {
	name: 'ToolsPage',
	components: {
		GradientBackground,
		CustomNavbar,
		ToolCard
	},
	data() {
		return {
			searchText: '',
			allTools: [],
			selectedCategory: 'all',
			toolsService: null,
			categories: [
				{ id: 'all', name: '全部' },
				{ id: 'daily', name: '日常' },
				{ id: 'fortune', name: '运势' },
				{ id: 'life', name: '生活' },
				{ id: 'relationship', name: '情感' },
				{ id: 'divination', name: '占卜' },
				{ id: 'study', name: '学业' }
			]
		}
	},
	computed: {
		filteredTools() {
			let tools = this.allTools
			
			// 按分类筛选
			if (this.selectedCategory !== 'all') {
				tools = tools.filter(tool => tool.category === this.selectedCategory)
			}
			
			// 按搜索关键词筛选
			if (this.searchText) {
				const searchLower = this.searchText.toLowerCase()
				tools = tools.filter(tool => 
					tool.name.toLowerCase().includes(searchLower) ||
					tool.description.toLowerCase().includes(searchLower)
				)
			}
			
			return tools
		}
	},
	onLoad() {
		this.initData();
	},
	methods: {
		initData() {
			console.log('Tools - initData start');
			
			try {
				this.toolsService = new ToolsService();
				console.log('Tools - ToolsService created');
				
				this.allTools = this.toolsService.getAllTools();
				console.log('Tools - allTools loaded:', this.allTools.length);
				
				if (!this.allTools || this.allTools.length === 0) {
					console.error('Tools - no tools loaded');
					uni.showToast({
						title: '工具数据加载失败',
						icon: 'none'
					});
				}
			} catch (error) {
				console.error('Tools - initData error:', error);
				this.allTools = [];
				uni.showToast({
					title: '初始化失败',
					icon: 'none'
				});
			}
		},
		
		onSearchInput() {
			// 搜索输入处理，可以添加防抖功能
		},
		
		selectCategory(categoryId) {
			this.selectedCategory = categoryId;
		},
		
		openTool(tool) {
			console.log('Opening tool:', tool);
			
			if (!tool.route) {
				uni.showToast({
					title: '该工具正在开发中',
					icon: 'none'
				});
				return;
			}
			
			uni.navigateTo({
				url: tool.route
			});
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	flex: 1;
	display: flex;
	flex-direction: column;
	height: calc(100vh - 132rpx); /* 减去导航栏和TabBar高度 */
}

.content {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: 32rpx;
}

.search-section {
	margin-bottom: 32rpx;
	
	.search-box {
		position: relative;
		
		.search-input {
			width: 100%;
			height: 80rpx;
			padding: 0 120rpx 0 32rpx;
			border: 2rpx solid #f0f0f0;
			border-radius: 40rpx;
			font-size: 28rpx;
			background-color: white;
			box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
		}
		
		.search-icon {
			position: absolute;
			right: 32rpx;
			top: 50%;
			transform: translateY(-50%);
			font-size: 32rpx;
			color: rgba(0, 0, 0, 0.7);
		}
	}
}

.category-section {
	margin-bottom: 32rpx;
	
	.category-scroll {
		white-space: nowrap;
		
		.category-list {
			display: flex;
			flex-direction: row;
			gap: 16rpx;
			padding: 0 8rpx;
			
			.category-item {
				padding: 16rpx 32rpx;
				border-radius: 24rpx;
				background-color: rgba(255, 255, 255, 0.8);
				border: 2rpx solid transparent;
				transition: all 0.3s ease;
				flex-shrink: 0;
				
				&.active {
					background: linear-gradient(135deg, #6A82FB 0%, #FC5C7D 100%);
					border-color: #6A82FB;
					
					.category-name {
						color: white;
						font-weight: 500;
					}
				}
				
				.category-name {
					font-size: 28rpx;
					color: #000000;
					transition: color 0.3s ease;
				}
			}
		}
	}
}

.tools-list {
	flex: 1;
	
	.tools-grid {
		display: flex;
		flex-direction: column;
		gap: 16rpx;
	}
	
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 120rpx 32rpx;
		
		.empty-icon {
			margin-bottom: 32rpx;
			
			.icon-text {
				font-size: 120rpx;
				opacity: 0.3;
			}
		}
		
		.empty-text {
			font-size: 32rpx;
			font-weight: 500;
			color: rgba(0, 0, 0, 0.7);
			margin-bottom: 16rpx;
		}
		
		.empty-desc {
			font-size: 24rpx;
			color: rgba(0, 0, 0, 0.5);
			text-align: center;
			line-height: 1.5;
		}
	}
}

/* 响应式设计 */
@media (max-width: 750rpx) {
	.content {
		padding: 24rpx;
	}
	
	.category-section .category-scroll .category-list .category-item {
		padding: 12rpx 24rpx;
		
		.category-name {
			font-size: 26rpx;
		}
	}
}
</style>